Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Offering a guide to professional web site design, web page design and web design guidelines

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

Using an Image as a Submit Button within an HTML Web Page


Instead of using the standard form submit button, you can use an image.

Place the following code within your FORM code.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text">
<INPUT type=image name="submit" src="yourimage.gif" border="0">
</FORM>

Browser View:

This example displays a text box with an image submit button. Notice the uneven alignment.

In the next example, this same text box and image will be displayed within a table with the background color set to the same color as the image background.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2">
<TR>
<TD BGCOLOR="#8463FF">
<INPUT type="text" size="10" maxlength="30">
</TD>
<TD BGCOLOR="#8463FF" VALIGN="Middle">
<INPUT type=image name="search" SRC="yourimage.gif" border="0">
</TD>
</TR>
</TABLE>
</FORM>

When using an image to replace the standard submission button, make sure you include, "BORDER=0," as the Netscape browser will show a border.

 More Web Design Tips